<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登录网关</title>
    <style type="text/css">
        * {
                padding: 0;
                margin: 0;
            }

            html,
            body {
                height: 100%;
            }

            body {
                display: flex;
                justify-content: center;
                align-items: center;
                /* 渐变色网站： https://webgradients.com/*/
                background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
                /* 渐变换图片 */
            }

            .login {
                width: 400px;
                height: 250px;
                background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
                border-radius: 8px;
            }

            .login h1 {
                height: 38px;
                width: 93%;
                background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                line-height: 38px;
                font-size: 30px;
                text-align: center;
                border-radius: 5px;
                margin: 15px auto;
            }

            .login-form {
                width: 60%;
                margin: 0 auto;
            }

            .login-form form input {
                width: 220px;
                height: 30px;
                outline: none;
                margin: 10px auto;
                border-radius: 5px;
            }

            .button {
                /* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
                line-height: 30px;
                height: 30px;
                width: 70px;
                color: #ffffff;
                background-color: #47d5f1;
                font-size: 16px;
                font-weight: normal;
                font-family: Arial;
                border: 0px solid #dcdcdc;
                -webkit-border-top-left-radius: 3px;
                -moz-border-radius-topleft: 3px;
                border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -moz-border-radius-topright: 3px;
                border-top-right-radius: 3px;
                -webkit-border-bottom-left-radius: 3px;
                -moz-border-radius-bottomleft: 3px;
                border-bottom-left-radius: 3px;
                -webkit-border-bottom-right-radius: 3px;
                -moz-border-radius-bottomright: 3px;
                border-bottom-right-radius: 3px;
                -moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
                -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
                box-shadow: inset 0px 0px 0px 0px #ffffff;
                text-align: center;
                display: inline-block;
                text-decoration: none;
                margin-left: 80px;
            }

            .button:hover {
                background-color: #446bf7;
            }

            .footer {
                position: fixed;
                bottom: 0;
                height: 50px;
                font-size: 12px;
                text-align: center;
                font-family: "宋体";
            }
    </style>
</head>

<body>
    <div class="login">
        <h1>边缘计算网关</h1>
        <div class="login-form">
            <form method="post">
                <input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
                <input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
                <form>
                    <button type="button" class="button" id="loginBtn" onclick="checkAndLogin()">登     录</button>
                </form>
            </form>
        </div>
    </div>
    <div class="footer">
        联系电话: 400-706-1880 &nbsp; 技术支持QQ: 1075518044<br>
        开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"><b>边缘计算网关B/S版</b></a>
    </div>
    <script>
        function checkAndLogin() {
            // 获取用户名和密码输入框的值
            var username = document.getElementById('usr').value;
            var password = document.getElementById('pwd').value;

            // 进行简单的非空验证，这里可以根据实际需求增加更复杂的验证规则，比如密码长度等
            if (username.trim() === "" || password.trim() === "") {
                alert("请输入用户名和密码");
                return;
            }
            else if (username.trim() === "zwz" || password.trim() === "666") {
                // alert("请输入用户名和密码");
                // return;
                window.location.href = 'ym.html';
            }

            // 如果验证通过，执行跳转操作，此处是跳转到zhuye.html，可根据实际需求修改
           // window.location.href = 'zhuye.html';
        }
    </script>
</body>

</html>